<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>惰性单例</title>
</head>
<body>
    <button id="loginBtn">登录</button>
    <script>
        /**
         * 需要时才去创建
         * 创建后缓存下来
         * 下次使用时直接引用
         */
        var createLoginLayer = (function () {
            var div;
            return function () {
                if(!div){
                    div = document.createElement('div');
                    div.innerHTML = '登录浮框';
                    div.style.display = 'none';
                    document.body.appendChild(div);
                }
                return div;
            }
        })();
        document.getElementById('loginBtn').onclick = function () {
            var loginLayer = createLoginLayer();
            loginLayer.style.display = 'block';
        }
    </script>
</body>
</html>